<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    
    <!-- 主内容区 -->
    <view class="content">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item, index) in carouselImgList" :key="index">
					<view class="swiper-item">
						<image :src="item" mode="aspectFit" class="img-swiper"></image>
					</view>
				</swiper-item>
			</swiper>
	  
			<view v-if="gridList1.length > 0" class="other-functions-wrap uni-common-mt">
				<view class="uni-title title-style uni-common-mb">基础服务</view>
				<view class="other-functions">
					<view class="function-item" v-for="(item, index) in gridList1" :key="item.to" @click="handleGoToPage(item.to)">
						<image :src="item.icon" mode="aspectFit" class="item-icon"></image>
						<text class="item-text">{{item.title}}</text>
					</view>
				</view>
			</view>
			
			<view v-if="gridList3.length > 0" class="other-functions-wrap uni-common-mt">
				<view class="uni-title title-style uni-common-mb">填报服务</view>
				<view class="other-functions">
					<view class="function-item" v-for="(item, index) in gridList3" :key="item.to" @click="handleGoToPage(item.to)">
						<image :src="item.icon" mode="aspectFit" class="item-icon"></image>
						<text class="item-text">{{item.title}}</text>
					</view>
				</view>
			</view>
		
			<view class="other-functions-wrap uni-common-mt">
				<view class="uni-between  uni-common-mb">
					<view class="uni-title title-style">自助查询</view>
					<!-- <view class="uni-h6">更多</view> -->
				</view>
			
				<view class="other-functions">
					<view class="progress" @click="handleGoToPage('')">
						<view class="other-functions-img">
							<image src="/static/icons/forms.png"></image>
						</view>
						<view class="other-functions-cloumn">
							<view class='other-functions-cloumn-title'>进度查询</view>
							<view class="other-functions-cloumn-span uni-h6">查询工单进度></view>
						</view>
						<badge :count="messageCount" ></badge>
					</view>
					<view class="feedback" @click="handleGoToPage('')">
						<view class="other-functions-img">
							<image src="/static/icons/list.png"></image>
						</view>
						<view class="other-functions-cloumn">
							<view class='other-functions-cloumn-title'>意见反馈</view>
							<view class="other-functions-cloumn-span uni-h6">查询反馈评价></view>
						</view>
					</view>
				</view>
			</view>
    </view> 
  </view>
</template>

<script>
import auth from '/utils/auth.js';
import { isEmpty } from '/utils/utils.js';
export default {
  data() {
    return {
      currentTab: 0,
	  indicatorDots: true,
	  autoplay: true,
	  interval: 2000,
	  duration: 500,
	  messageCount: 5,
	  carouselImgList: [
	  	'/static/img/swiper/1.jpg',
	  	'/static/img/swiper/1.jpg',
	  ],
	  gridList1: [],
	  gridList3: [],
	  gridList2: [{
	  		title: "已完成",
	  		icon: "/static/img/home/desc.png",
	  		to: "completed",
	  	},
	  	{
	  		title: "进行中",
	  		icon: "/static/img/home/historyOrder.png",
	  		to: "pedding",
	  	},
	  	// {
	  	// 	title: "意见反馈",
	  	// 	icon: "/static/img/home/feedback.png",
	  	// 	to: "",
	  	// },
	  ],
    }
  },
	onShow () {
		this.initData();
	},
	onLoad() {
		this.initData();
	},
  methods: {
		initData() {
			// 根据用户角色分配不同显示的菜单
			
			let userInfo = uni.getStorageSync('userInfo');
			console.log(userInfo,'iuuuuu')
			if (!isEmpty(userInfo)) {
				console.log(userInfo.roles.includes('admin'))
				if (userInfo.roles.includes('admin') || userInfo.roles.includes('audit')) { // 管理员
					// 所有菜单 发起订单 、申请工单、历史订单、。。
					this.gridList1 = [{
							title: "新增环节",
							icon: "/static/img/home/addOrder.png",
							to: "/pages/workorder/form",
						},
						{
							title: "查看环节",
							icon: "/static/img/home/historyOrder.png",
							to: "/pages/workorder/progress",
						},
						{
							title: "发起订单",
							icon: "/static/img/home/desc.png",
							to: "/pages/workorder/initiateOrder",
						},
						{
							title: "查看订单",
							icon: "/static/img/home/question.png",
							to: "/pages/workorder/orderList",
						},
						// {
						// 	title: "我的待办",
						// 	icon: "/static/img/home/desc.png",
						// 	to: "/pages/workorder/myBacklog",
						// },
					]
					
					this.gridList3 = [{
							title: "我的待办",
							icon: "/static/img/home/desc.png",
							to: "/pages/workorder/myBacklog",
						},
						{
							title: "我的已办",
							icon: "/static/img/home/addOrder.png",
							to: "/pages/workorder/myTask",
						},
						{
							title: "待审批",
							icon: "/static/img/home/question.png",
							to: "/pages/workorder/myApply",
						}
					]
				} else if (userInfo.roles.includes('common')) { // 普通员工
					this.gridList1 = [{
							title: "我的待办",
							icon: "/static/img/home/desc.png",
							to: "/pages/workorder/myBacklog",
						},
						{
							title: "我的任务",
							icon: "/static/img/home/addOrder.png",
							to: "/pages/workorder/myTask",
						},
						{
							title: "待审批",
							icon: "/static/img/home/question.png",
							to: "/pages/workorder/myApply",
						}
					]
					this.gridList3 = []
				}
			} else {
				this.gridList1 = []
				this.gridList3 = []
				// 无用户信息 无权限 跳转到登录页
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
		},
    // 导航到工单填报页面
    async navigateToForm() {
			const userInfo = await auth.getUserInfo();
			console.log(userInfo, 'userInfo');
      uni.redirectTo({
        url: '/pages/workorder/form'
      })
    },
	
		async handleGoToPage(to) {
			if (isEmpty(to)) {
				uni.showModal({
				  title: '温馨提示',
				  content: '该模块正在建设中，暂未开放',
				  showCancel: false,
				  confirmText: '知道了'
				})
				return
			}
			const userInfo = await auth.getUserInfo();
			console.log(userInfo, 'userInfo');
			uni.redirectTo({
				url: to
			})
		},
    
    // 切换底部导航
    switchTab(index) {
      if (index === 0) {
        // 首页
        uni.switchTab({
          url: '/pages/index/index'
        })
      } else if (index === 1) {
        // 我的
        uni.switchTab({
          url: '/pages/mine/mine'
        })
      }
      this.currentTab = index
    }
  }
}
</script>

<style>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
}

/* 导航栏样式 */
.navbar {
  height: 100rpx;
  background-color: #007AFF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  font-weight: bold;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.navbar-title {
  letter-spacing: 2rpx;
}

/* 内容区样式 */
.content {
  flex: 1;
  padding: 40rpx 30rpx;
  overflow-y: auto;
}

.function-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}

.card-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.card-desc {
  font-size: 24rpx;
  color: #666;
}

.other-functions-wrap {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.other-functions {
  display: flex;
  justify-content: space-between;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 45%;
}

.item-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 15rpx;
}

.img-swiper {
  height: 295rpx;
  /* margin-left: 46rpx; */
	width: 100vw;
}

.item-text {
  font-size: 28rpx;
  color: #333;
}

/* 底部导航样式 */
.tabbar {
  height: 100rpx;
  border-top: 1rpx solid #eee;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 100%;
}

.tabbar-item.active .tabbar-text {
  color: #007AFF;
}

.tabbar-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 8rpx;
}

.tabbar-text {
  font-size: 24rpx;
  color: #999;
}

.title-style {
  line-height: none;
  padding:10rpx 0;
  line-height:1;
  font-weight: 700;
}

.progress {
	background: linear-gradient(3deg, rgb(248, 252, 252) 0%, rgb(207, 240, 249) 100%);
	display: flex;
	width: 48%;
	height: 100rpx;
	border-radius: 16rpx;
	color: #565454;
}

.feedback {
	background: linear-gradient(3deg, rgb(255, 255, 255) 0%, rgb(199, 219, 255) 100%);
	display: flex;
	width: 48%;
	height: 100rpx;
	border-radius: 16rpx;
	color: #565454;
}

.other-functions-img {
	display: flex;
	align-items: center;
	padding: 0 30rpx;
}

.other-functions-img image{
	width: 60rpx;
	height: 60rpx;
}

.other-functions-cloumn {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.other-functions-cloumn-title {
}

.other-functions-cloumn-span {
	font-size: 24rpx;
}
</style>    